import React, { Component } from 'react'

export default class Rcc extends Component {
  // constructor() {
  //   super()
  //   this.handleClick = this.handleClick.bind(this)
  // }
  state = {
    msg: 'hello react'
  }
  render() {
    return (
      <div>
        <h1>Rcc</h1>
        <button onClick={this.handleClick}>没有改变this指向</button>
        <br />
        {/* 
          如果没有传递参数默认传递一个event对象 
          如果传递参数直接传递具体的值
          如果想传递的参数具备event对象和其他参数 可以以这种方式传递 如： this.handleClick.bind(this, event,1)
        */}
        <button onClick={this.handleClick.bind(this, event, 1, 2)}>
          1.通过bind改变this的指向
        </button>
        <br />
        {/* 
        
          如果没有传递参数默认传递 undefined  
          如果传递参数直接传递具体的值
          如果想传递的参数具备event对象和其他参数
        */}
        <button onClick={(e) => this.handleClick(e, 1, 2)}>
          2. 通过箭头函数改变this的指向
        </button>
        <br />
        {/* 该写法只适合用于没有参数传递的时候 */}
        <button onClick={this.handleClickFn}>
          3. 直接以箭头函数的方式定义
        </button>
      </div>
    )
  }

  handleClick(e, num, num2) {
    console.log(e, num, num2)
    // console.log(this.state.msg)
  }
  handleClickFn = () => {
    console.log(this.state.msg)
  }
}
